<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TIM-Login</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
  <!-- 外部容器 -->
  <div class="container">
    <!-- 左侧图片 -->
    <div class="left"></div>
    <!-- 右侧登录部分 -->
    <div class="right">

      <!-- 设置按钮 -->
      <button class="iconfont icon-shezhi settings" title="设置"></button>
      <!-- 退出/关闭按钮 -->
      <button class="iconfont icon-quxiao exit" title="关闭"></button>
      <!-- 返回按钮 -->
      <div class="return" style="display: none;" onclick="goback()">
        <span class="iconfont icon-xiangzuojiantou return-icon" title="返回"></span>
        <span class="return-text">返回</span>
      </div>

      <!-- 登录按钮容器 -->
      <div class="login-btn-container">
        <!-- QQ登录按钮组 -->
        <div class="login-btn qq " onclick="chooseLoginMethod('qq')" onmouseover="onMouseOverBtn('qq')"
          onmouseout="onMouseOutbtn('qq')">
          <!-- 给元素class里添加active的作用是使元素在页面打开时就渲染一次 -->
          <div class="qq-btn active">
            <span class="qq-icon iconfont icon-QQ active"></span>
          </div>
          <p class="qq-font active">QQ登录</p>
        </div>
        <!-- 微信登录按钮 -->
        <div class="login-btn wechat" onclick="chooseLoginMethod('wechat')" onmouseover="onMouseOverBtn('wechat')"
          onmouseout="onMouseOutbtn('wechat')">
          <div class="wechat-btn">
            <span class="wechat-icon iconfont icon-weixin"></span>
          </div>
          <p class="wechat-font">微信登录</p>
        </div>
      </div>
      <!-- QQ二维码登录按钮 -->
      <span class="erweima iconfont icon-erweima" title="二维码登录" onclick="chooseLoginMethod('erweima')"></span>

      <!-- QQ登录表单 -->
      <form class="login-form qq-form active">
        <input type="text" id="username" class="input-field" placeholder="  QQ号码/手机/邮箱">
        <div class="dropdown-toggle">
          <span class="icon icon-down iconfont icon-xiangxiajiantou"></span>
          <span class="icon icon-up iconfont icon-xiangshangjiantou"></span>
        </div>
        <div class="dropdown-content">
          <div class="dropdown-item">860282667</div>
          <div class="dropdown-item">2205590383</div>
        </div>
        <input type="password" id="password" class="password-field" placeholder="  密码">

        <div class="submit-btn" onmouseover="onMouseOverSub('over')" onmouseout="onMouseOutSub('out')">
          <span class="iconfont icon-arrowRight submit-jiantou" type="submit"></span>
        </div>
        <!-- 用于显示错误信息的元素 -->
        <div class="error-message1" style="display: none;">请你输入账号后再登录</div>
        <div class="error-message2" style="display: none;">请你输入密码后再登录</div>
      </form>

      <!-- 微信二维码登录表单 -->
      <form class="login-form wechat-form">
        <img class="VX-code" src="img/微信登录二维码.PNG">
        <div class="VX-text">
          <p class="VX-text1">使用微信扫一扫登录</p>
          <p class="VX-text2">“TIM”</p>
        </div>
      </form>
      <!-- qq二维码登录表单 -->
      <form class="login-form qqcode-form">
        <img class="qq-code" src="img/QQ登录二维码.PNG">
        <p class="qqcode-text">用<a class="qqcode-a" href="https://office.qq.com/">TIM手机版</a>扫描二维码安全登录</p>
      </form>

      <!-- 底部选项 -->
      <div class="options">
        <div class="checkbox">
          <label class="label1">
            <input type="checkbox" class="checkbox1" id="rememberPassword">
            <span class="checkbox1-text">记住密码</span>
          </label>
          <label class="label2">
            <input type="checkbox" class="checkbox2" id="autoLogin" onchange="checkRememberPassword()">
            <span class="checkbox2-text">自动登录</span>
          </label>
        </div>

        <div class="link">
          <a class="link1" href="https://accounts.qq.com/find?aquin">找回密码</a>
          <a class="link2"
            href="https://ssl.zc.qq.com/v3/index-chs.html?from=client&regkey=43B2DB50B972E81C4E88827E180CD45D41D2297E598B46303C8E0D629D54AB87&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5705_NewAccount_Btn.0&ADPUBNO=27339">注册账号</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 登陆成功提示框 -->
  <div id="toast">
    登录成功!
  </div>

  <script src="scripts.js"></script>
</body>

</html>